<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>触碰变色</title>
    <style>
        body{
            position:relative ;
        }

        #move{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #7B68EE;
            position: absolute;

        }
        #color{
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: deeppink;
            left: 400px;
            top: 400px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="move" ></div>
<div id="color"></div>

</body>
<script>
    var move = document.getElementById('move');
    var color = document.getElementById('color');
    move.onmousedown = function (event) {
//       var event = event || window.event;
        var x = event.clientX-(move.offsetLeft);
        var y = event.clientY-(move.offsetTop);
        var num = move.offsetWidth/2 + color.offsetWidth/2;
//        直角边
        var a = (move.offsetLeft + move.offsetWidth/2) - (color.offsetLeft + color.offsetWidth);
        var b = (move.offsetTop + move.offsetHeight/2) - (color.offsetTop + color.offsetHeight);
        if(num*num > a*a + b*b) {
            color.style.backgroundColor = 'red';
        }else{

        }
//                color.style.backgroundColor = 'deeppink';
//            }
//        document.onmousemove = function (event) {
//            move.style.left = (event.clientX-x)+'px';
//            move.style.top = (event.clientY-y)+'px';
//            if((move.offsetLeft + move.offsetWidth) >= color.offsetLeft && (color.offsetLeft + color.offsetWidth) >= move.offsetLeft && (move.offsetTop + move.offsetHeight) >= color.offsetTop&& (color.offsetTop + color.offsetHeight) >= move.offsetTop
//            ){
//                color.style.backgroundColor = 'red';
//            }else{
//                color.style.backgroundColor = 'deeppink';
//            }
//
//
//        }

    }
    document.onmouseup = function () {
        document.onmousemove = '';


    }
</script>
</html>